import { messages } from "share/common";
import React, { Component } from "react";
import { Checkbox } from "antd";
import "styles/financial-management/finance-audit/counter-modal.scss";

class CounterModal extends Component {
  state = {
    counter: 3,
  };

  componentDidMount() {
    let { counter } = this.state;
    this.interval = setInterval(() => {
      counter--;
      counter && this.setState({ counter });
      if (!counter) {
        clearInterval(this.interval);
      }
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  renderRemindCheckbox = (type) => {
    let setRemindStorage = (checked) => {
      let itemName = `AUDIT_REMIND_${type}`;
      localStorage.setItem(itemName, checked);
    };
    return (
      <div className="counter-modal-checkbox">
        <Checkbox onChange={(e) => setRemindStorage(e.target.checked)} />
        {messages("expense-14.key146") /*下次不再提示*/}
      </div>
    );
  };

  getContent = () => {
    const { type, params = {} } = this.props;
    const { notMatchedNum, toBeCheckedNum } = params;
    const { counter } = this.state;
    switch (type) {
      case "AUTO_CHECK":
        let content = "";
        if (notMatchedNum && toBeCheckedNum) {
          content = messages("expense-14.key147", {
            arg1: notMatchedNum,
            arg2: toBeCheckedNum,
          }) /*有 {arg1} 笔发票未匹配，{arg2} 组待核对*/;
        } else if (notMatchedNum) {
          content = messages("expense-14.key148", {
            arg1: notMatchedNum,
          }) /*有 {arg1} 笔发票未匹配*/;
        } else {
          content = messages("expense-14.key149", {
            arg1: toBeCheckedNum,
          }) /*有 {arg1} 组发票待核对*/;
        }
        return (
          <div>
            <div className="counter-modal-content">{content}</div>
            <div className="font-disabled">
              {
                messages("expense-14.key150", {
                  arg1: counter,
                }) /*{arg1}S后将自动进入人工核对发票模式*/
              }
            </div>
          </div>
        );
      case "ONLY_NOT_MATCHED":
        return (
          <div>
            <div className="counter-modal-content">
              {messages("expense-14.key151") /*全部发票核对成功*/}
            </div>
            <div className="font-disabled">
              {
                messages("expense-14.key152", {
                  arg1: counter,
                }) /*您可以继续匹配其它发票（{arg1}S）*/
              }
            </div>
            {this.renderRemindCheckbox(type)}
          </div>
        );
      case "ONLY_TO_BE_CHECKED":
        return (
          <div>
            <div className="counter-modal-content">
              {messages("expense-14.key153") /*全部发票匹配成功*/}
            </div>
            <div className="font-disabled">
              {
                messages("expense-14.key154", {
                  arg1: counter,
                }) /*您可以继续核对发票（{arg1}S）*/
              }
            </div>
            {this.renderRemindCheckbox(type)}
          </div>
        );
      case "ALL_CHECK_SUCCESS":
        return (
          <div>
            <div className="counter-modal-content">
              {messages("expense-14.key151") /*全部发票核对成功*/}
            </div>
            <div className="font-disabled">
              {
                messages("expense-14.key155", {
                  arg1: counter,
                }) /*{arg1}S后将离开该页面*/
              }
            </div>
            {this.renderRemindCheckbox(type)}
          </div>
        );
    }
  };

  render() {
    return <div className="counter-modal">{this.getContent()}</div>;
  }
}

export default CounterModal;
